<template>
	<view class="out">
<!-- 		<input type="text" @focus="is_active = true" @blur="is_active = false" 
		@input="event => msg = event.detail.value" /> -->
<!-- 		<input type="text" @focus="is_active = true" @blur="is_active = false"
		@confirm="event => msg = event.detail.value" /> -->
		<input type="text" @focus="is_active = true" @blur="is_active = false" v-model="msg" /><!-- v-model双向绑定 -->
		<image src="../../../static/chicken.gif" mode="" class="pic" :class="is_active ? 'active':''"></image>
	</view>
	<view class="showmsg">输入内容显示：{{msg}}</view>
</template>

<script setup>
	import {ref} from 'vue';
	const is_active = ref(false)
	const msg = ref("")
</script>

<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative;
		input {
			border: 1px solid #ccc;
			height: 40px;
			position: relative;
			z-index: 2;
			background: #fff;
			padding: 0 20px;
		}
		.pic {
			height: 24px;
			width: 24px;
			position: absolute;
			z-index: 1;
			top: 0px;
			left: calc(50% - 12px);
			transition: top 0.3s;
		}
		.active {
			top: -24px;
		}
	}
	.showmsg {
		padding: 15px;
		font-size: 24px;
		line-height: 24px;
	}
</style>
